<template>
     <transition v-if="this.logStatue">
        <div class="logView">
            <div>
                <i class="el-icon-plus" style="transform:rotate(45deg); font-size: 30px; position: absolute; right: 20px; top: 10px; cursor: pointer;" @click="close()" ></i>
            </div>
            <div>
                <img src="../../assets/img/wang.png" class="head">
                <span class="title">网易云音乐</span>
            </div>

        <div>
            <el-input type="text" v-model="phone" class="phone" placeholder="请输入手机号">
            </el-input>
                <span class="prefix-icon">
                    +86
                </span>
            <el-input type="text" v-model="password" class="password" placeholder="请输入密码" show-password>
        </el-input>
        
          
        </div>

            <!-- 文字部分 -->
            <div>
                <el-link type="info" class="forget" :underline="false">忘记密码</el-link>
            </div>

            <!-- 登录按钮 -->
            <div>
                <el-button class="login" @click="login()">登录</el-button>
            </div>

            <div>
                <span class="enroll" @click="enroll()">
                    注册
                </span>
            </div>
            
            <el-tooltip effect="dark" content="请阅读并勾选" placement="top-start">
                <el-checkbox v-model="checked" class="agree">同意</el-checkbox>
            </el-tooltip>
         
          <div class="policy">
            <a href="https://st.music.163.com/official-terms/service" target="_blank" style="color:#5975B2 ;">《服务条款》</a>
            <a href="https://st.music.163.com/official-terms/privacy" target="_blank" style="color:#5975B2 ;">《隐私政策》</a>
            <a href="https://st.music.163.com/official-terms/children" target="_blank" style="color:#5975B2 ;">《儿童隐私政策》</a>
          </div>
           
        </div>

     </transition>
  
</template>

<script>
import { mapGetters } from 'vuex';

import { loginConsumer } from '../../api/log'
export default {
    computed: {
        ...mapGetters([
            'logStatue'
        ]),
    },
    data(){
        return{
            checked:false,
            phone:'',
            password:''
        }
    },
    methods:{
        clear(){
            this.phone = '',
            this.password = '' 
        },
        close(){
            this.clear();
            this.$store.commit('setLogStatue',false);
        },
        login(){
            if(this.checked === false){
                this.$message.error("请同意协议")
            }else{
                const data = {phone : this.phone , password : this.password}
                loginConsumer(data).then((res) =>{
                    if(res.data.code === 1){
                        this.$store.commit('setConsumerId',res.data.data.id);
                        this.$store.commit('setConsumerName',res.data.data.username);
                        this.$store.commit('setConsumerAvatar',res.data.data.avatar);
                        this.$store.commit('setConsumerIsLogin',true);
                        this.close();
                    }
                        if (res.data.code === 0){
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
        enroll(){
            if(this.checked === false){
                this.$message.error("请同意协议")
            }else{
                
            }
        }
    }

}
</script>

<style scoped>
.logView{
    font-size: 14px;
    width: 400px;
    height: 600px;
    position: fixed;
    right: 800px;
    top: 150px;
    z-index: 99;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    user-select: none;
}
.head{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 100px;
}
.title{
    position: absolute;
    font-size: 25px;
    left: 160px;
    top: 109px;
}
.phone{
    position: absolute;
    width: 300px;
    left: 60px;
    top: 200px;
}
::v-deep.phone .el-input__inner{
    border-radius: 20px;
    text-indent: 70px;
}
::v-deep .phone .el-input__inner:focus {
    border: 1px solid #F14F3D;
}
.prefix-icon{
    position: absolute;
    left: 80px;
    top: 212px;
}
.password{
    width: 300px;
    position: absolute;
    left: 60px;
    top: 250px;
}
::v-deep.password .el-input__inner{
    border-radius: 20px;
}
::v-deep .password .el-input__inner:focus {
    border: 1px solid #F14F3D;
}
.forget{
    position: absolute;
    left: 290px;
    top: 300px;
}
.login{
    width: 300px;
    position: absolute;
    top: 330px;
    right: 40px;
    background-color: #F14F3D;
    color: #ffffff;
    border-radius: 20px;
}
.el-button:hover{
    background: #e44a39 !important;
    color: white !important;
}
.el-button:focus {
    background: #F14F3D !important;
    color: white !important;
  }

.agree{
    position: absolute;
    left: 55px;
    top: 450px;
}

::v-deep.agree .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #F14F3D;
  background-color:#F14F3D;
  border-radius: 50%;
}


a:link {
    
    text-decoration:none;
} 
.policy{
    position: absolute;
    top: 450px;
    left: 110px;
}
.enroll{
    position: absolute;
    left: 195px;
    top: 390px;
    cursor: pointer;
}
</style>